<template>
	<view class="loading-state" :class="[mode]">
		<!-- 全屏模式 -->
		<template v-if="mode === 'fullscreen'">
			<view v-if="isLoading" class="loading-content">
				<view class="spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
			<view v-else-if="isError" class="error-content">
				<text class="error-text">加载失败</text>
				<button class="retry-btn" @click="handleRetry">重试</button>
			</view>
			<view v-else-if="isEmpty" class="empty-content">
				<image src="/static/no-data.png" class="no-data-image"></image>
				<text class="empty-text">暂无数据</text>
			</view>
		</template>

		<!-- 列表底部模式 -->
		<template v-else-if="mode === 'footer'">
			<view v-if="isLoading" class="footer-loading">
				<view class="spinner small"></view>
				<text class="footer-text">加载中...</text>
			</view>
			<view v-else-if="isError" class="footer-error">
				<text class="footer-text">加载失败</text>
				<text class="retry-text" @click="handleRetry">点击重试</text>
			</view>
			<view v-else-if="isNoMore" class="footer-no-more">
				<text class="footer-text">没有更多了</text>
			</view>
		</template>
	</view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
	// 模式：全屏或列表底部
	mode: {
		type: String,
		default: 'fullscreen',
		validator: (value) => ['fullscreen', 'footer'].includes(value)
	},
	// 加载状态
	loading: {
		type: Boolean,
		default: false
	},
	// 错误状态
	error: {
		type: Boolean,
		default: false
	},
	// 空数据状态
	empty: {
		type: Boolean,
		default: false
	},
	// 无更多数据状态（仅用于列表底部模式）
	noMore: {
		type: Boolean,
		default: false
	}
});

const emit = defineEmits(['retry']);

// 计算属性
const isLoading = computed(() => props.loading);
const isError = computed(() => props.error);
const isEmpty = computed(() => props.empty);
const isNoMore = computed(() => props.noMore);

// 重试事件处理
const handleRetry = () => {
	emit('retry');
};
</script>

<style lang="scss">
.loading-state {
	&.fullscreen {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		background-color: #fff;

		.loading-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;
		}

		.error-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;
		}

		.empty-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20rpx;
		}

		.loading-text,
		.error-text,
		.empty-text {
			font-size: 28rpx;
			color: #999;
		}

		.retry-btn {
			margin-top: 20rpx;
			padding: 10rpx 30rpx;
			background-color: #007AFF;
			color: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
		}
	}

	&.footer {
		padding: 20rpx;
		text-align: center;

		.footer-loading,
		.footer-error,
		.footer-no-more {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10rpx;
		}

		.footer-text {
			font-size: 24rpx;
			color: #999;
		}

		.retry-text {
			font-size: 24rpx;
			color: #007AFF;
			margin-left: 10rpx;
		}
	}

	// 添加旋转动画样式
	.spinner {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #f3f3f3;
		border-top: 4rpx solid #007AFF;
		border-radius: 50%;
		animation: spin 1s linear infinite;

		&.small {
			width: 24rpx;
			height: 24rpx;
			border-width: 3rpx;
		}
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.no-data-image{
		width: 200rpx;
		height: 160rpx;
	}
}
</style> 